<template>
    <div>
        <!--用户关联关系模态框-->
        <Modal v-model="isShowModal" title="关联关系" :mask-closable="false" fullscreen :scrollable="false">
            <template v-if="type === 'parent'">
                <Alert show-icon>当前展示会员{{treeData.nickName}}的上级关系树</Alert>
            </template>
            <template v-if="type === 'children'">
                <Alert show-icon>当前展示会员{{treeData.nickName}}的下级关系树</Alert>
            </template>
            <OrgTree :horizontal="horizontal" :props="props" :expandAll="isExpandAll" :collapsable="true" :data="treeData" :node-render="nodeRender"></OrgTree>
            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="oneExpandAll" type="primary">{{expandText}}</Button>
                <Button type="primary" @click="findUserHierarchy" :loading="loadingBtn">
                    <span v-if="!loadingBtn">刷新树</span>
                    <span v-else>请稍候...</span>
                </Button>
                <Button @click="hideModal">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    /**
     * 描述：树形显示上下级插件
     * 插件API地址：
     * https://github.com/lison16/v-org-tree
     */
    import OrgTree from 'v-org-tree'
    import 'v-org-tree/dist/v-org-tree.css'

    export default {
        name: "user-relation",
        data() {
            return {
                loadingBtn: false,
                isExpandAll: false,
                horizontal: true,
                isShowModal: false,
                treeData: {},
                props: {},
                params:{
                    userId:''
                },
                type:'',
                expandText:'一键展开'
            }
        },
        methods: {
            // 一键展开一键收起
            oneExpandAll(){
                if(this.isExpandAll){
                    this.isExpandAll = false;
                    this.expandText = '一键展开';
                }else{
                    this.isExpandAll = true;
                    this.expandText = '一键收起';
                }
            },
            // 查询用户关系
            findUserHierarchy() {
                this.axios.post('/user/findUserHierarchy', this.params).then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        if (this.type === 'parent') {// 显示上级
                            if (res.data.inviter.userId) {
                                this.horizontal = true;
                                this.props = {
                                    id: 'userId',
                                    label: 'username',
                                    nickName: 'nickName',
                                    children: 'parent',
                                    level:'level',
                                    expand: 'nodeSwitch'
                                };
                                this.treeData = res.data.inviter;
                                this.isShowModal = true;
                            } else {
                                this.$Message.warning('此用户暂时没有上级')
                            }
                        }

                        if (this.type === 'children') {// 显示下级
                            if (res.data.inviteeList.userId) {
                                this.horizontal = false;
                                this.props = {
                                    id: 'userId',
                                    label: 'username',
                                    nickName: 'nickName',
                                    children: 'children',
                                    level:'level',
                                    expand: 'nodeSwitch'
                                };
                                this.treeData = res.data.inviteeList;
                                this.isShowModal = true;
                            } else {
                                this.$Message.warning('此用户暂时没有下级')
                            }
                        }
                    }
                })
            },
            // 显示模态框
            showModal(e, type) {
                this.params.userId = e.userId;
                this.type = type;
                this.findUserHierarchy();
            },
            // 隐藏模态框
            hideModal() {
                this.isShowModal = false;
            },
            nodeRender (h, data) {
                // console.log(data);

                let level = '';
                if(data.level == 0) level = '普通会员';
                if(data.level == 1) level = '体验员';
                if(data.level == 2) level = '销售经理';
                if(data.level == 3) level = '销售总监';
                if(data.level == 4) level = '董事';

                return h('div',[
                    h('div',{

                    }, data.nickName),
                    h('div',{

                    }, data.username),
                    h('div',{

                    }, level),
                ])
            }
        },
        components: {
            OrgTree
        }
    }
</script>

<style scoped>

</style>